<template>
  <div id="container"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted } from "vue";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 创建场景
// 场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。
const scene = new THREE.Scene();
// 添加背景颜色
// scene.background = new THREE.Color(0x666666);

// 创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 3;
camera.position.z = 10;

// 创建纹理
// const texture = new THREE.TextureLoader().load( "textures/02-map.jpg" );

// 创建立体纹理 左右上下前后
const cubeTexture = new THREE.CubeTextureLoader().setPath('/textures/').load([
  '04.jpg', '01.jpg',
  '05.jpg', '02.jpg',
  '06.jpg', '03.jpg'
])
// 添加背景纹理
scene.background = cubeTexture

// // 创建立方体
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshBasicMaterial({ 
//   // color: 0x00ff00
//   map: texture
// });

// 创建一个球体
const sphere = new THREE.SphereGeometry(1)
const material = new THREE.MeshBasicMaterial({ 
  // color: 0x00ff00
  envMap: cubeTexture
});


// 网格
const cube = new THREE.Mesh(sphere, material);
cube.position.set(0, 3, 0);
scene.add(cube);

// 添加网格地面
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

onMounted(() => {
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将渲染器添加到页面
  document.getElementById("container").appendChild(renderer.domElement);

    // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement)

  // 进行渲染
  // renderer.render(scene, camera);

  // 让立方体动起来
  function animate() {
    // 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 轨道控制器更新
    controls.update();
    renderer.render(scene, camera);
  }
  animate();
});
</script>